<template>
	 <!-- :class="{'hiddenBox':hiddenFlag}" -->
	<view class="storeBox" :class="{'hiddenBox':hiddenFlag}">
		<view class="top">
			<view class="" @click="showSelect">
				<view class="">{{checkStoreInfo.id?checkStoreInfo.storeName:'全部门店'}}</view>
				<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
			</view>
			<view class="">
				<u-input type="text" placeholder="请输入门店名称、菜品名称" v-model="tradeName" confirm-type="search"
					@confirm="getGoodList" :clearable="false"></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
			</view>
		</view>
		<view class="commenMenu">
			<view :class="{'check':checkMenuIndex==index}" v-for="(item,index) in menuList" :key="index"
				@click="changeMenuIndex(index)">
				<view class="">{{item.title}}</view>
				<view class="">({{item.storeNum}})</view>
			</view>
		</view>
		<view class="controlBox">
			<view @click="showBatchModifyInventory()">修改库存</view>
			<view @click="showModal('batchUp')">上架</view>
			<view @click="showModal('batchDown')">下架</view>
			<view @click="showModal('batchDelete')">删除</view>
		</view>
		<image class="addStore" @click="addGood"
			src="https://www.yongshantuan.cn/images/yongshan/platformSide/new.png" mode="">
		</image>
		<view class="storeBig">
			<view class="allCheckBox">
				<label>
					<checkbox :checked="allCheck" @click="changeAllCheck" /><text>全选</text>
				</label>
			</view>
			<view class="storeList" v-for="(item,index) in goodList" :key="item.id">
				<view class="name" @click="changeRadioState(index)">
					<image src="https://www.yongshantuan.cn/images/yongshan/shopLi2.png" mode="">
					</image>
					{{item.merchantId_dictText}}
				</view>
				<view class="info" @click="changeRadioState(index)">
					<checkbox :checked="item.checked" />
					<image :src="item.productPicture|getImg" mode="">
					</image>
					<view class="">
						<view class="">{{item.tradeName}}</view>
						<view class="">
							<view>已售: {{item.soldCount}}份</view>
							<view>限购: {{item.limitBuy=='-1'?'不限':item.limitBuy+'份'}}</view>
						</view>
						<view class="">排序: {{item.sort}}</view>
						<view class="">¥{{(item.commodityPrice!==''&&item.commodityPrice!==null)?item.commodityPrice:item.commodityPriceCache}}</view>
					</view>
					<view class="">
						<view class="" :class="{'check':item.upFlag=='上架中'}" @click.stop="showModal('up',index)">上架
						</view>
						<view class="" :class="{'check':item.upFlag=='下架中'}" @click.stop="showModal('down',index)">下架
						</view>
					</view>
				</view>
				<view class="control">
					<view class="" @click="showEdit(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/edit.png" mode="">
						</image>
						编辑
					</view>
					<view class="" @click="copyInfo(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/copy.png" mode="">
						</image>
						复制
					</view>
					<view class="" @click="showModal('delete',index)">
						<image src="https://www.yongshantuan.cn/images/yongshan/del.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="0"></CommenFooter>
		<AddGood ref="addGood" :show="showAddGood" :type="showType" :editInfo="editInfo" @hideBox="hideBox"
			@showToast="showToast" @getGoodList="getGoodList"></AddGood>
		<u-modal v-model="modalShow" :show-cancel-button="true" :content="content" @confirm="confirm"></u-modal>
		<view class="selectBox">
			<u-popup mode="bottom" v-model="selectVisiable" :closeable="true" @touchmove.stop.prevent="">
				<view class="selectContent">
					<view class="title">门店列表</view>
					<view class="selList" v-for="(item,index) in allStoreList" :key="index" @click="selectThis(item)">
						{{item.storeName}}
					</view>
				</view>
			</u-popup>
		</view>

		<u-toast ref="uToast"></u-toast>
		<BatchModifyInventory :data="selectRow" :show="batchVisiable" @hidden="hiddenBox" @showToast="showToast"
			@clearData="clearData"></BatchModifyInventory>
	</view>
</template>

<script>
	import {
		getStoreList,
		getGoodList,
		editGoodUpFlag,
		deteleGood,
		getFoodStateTotal,
		batchChangeState
	} from '@/utils/req/api.js'
	import CommenFooter from '@/components/footer/footer.vue'
	import AddGood from '@/components/addGood/addGood.vue'
	import BatchModifyInventory from '@/components/batchModifyInventory/batchModifyInventory.vue'
	export default {
		components: {
			CommenFooter,
			AddGood,
			BatchModifyInventory
		},
		data() {
			return {
				allStoreList: [],
				ids: [], //所有选中数据的id组成的数组
				selectRow: [], //所有选中数据
				hiddenFlag: false, //最外层元素是否禁止滚动
				selectVisiable: false,
				checkStoreInfo: '',

				checkMenuIndex: 0,
				menuList: [{
						title: '全部商品',
						storeNum: '0'
					},
					{
						title: '上架中',
						storeNum: '0'
					},
					{
						title: '下架中',
						storeNum: '0'
					},
					{
						title: '限购',
						storeNum: '0'
					},
				],
				goodList: [],
				showAddGood: false, //是否展示新增商品弹窗
				showType: '', //是新增还是编辑
				editInfo: '', //若是编辑则记录对应商品信息
				modalShow: false, //是否展示modal提示框
				modalType: '', //modal的种类
				content: '',
				deleteIndex: '', //点击删除订单列表对应的index
				upIndex: '', //点击上架商品时对应的id
				downIndex: '', //点击下架商品时对应的id

				pageNo: 1,
				pageSize: 10,
				moreGoodFlag: false,
				upFlag: null,
				limitBuy: null,
				tradeName: '',
				merchantId: null,

				allCheck: false,
				batchVisiable: false
			}
		},
		mounted() {
			this.getStoreList()
			this.getGoodList();
			this.getFoodStateTotal()
			console.log('this.moreGoodFlag', this.moreGoodFlag)
		},
		onReady() {
			//监控页面滚动
			// setTimeout(()=>{
			// window.addEventListener("scroll", this.getMoreGood, true);
			// },1000)

		},
		methods: {
			async getFoodStateTotal() {
				let res = await getFoodStateTotal();
				this.stateTotalInfo = res.data.result;
				this.menuList[0].storeNum = res.data.result.allCount;
				this.menuList[1].storeNum = res.data.result.yesCount;
				this.menuList[2].storeNum = res.data.result.noCount;
				this.menuList[3].storeNum = res.data.result.limitCount;
			},
			showToast(message, type) {
				this.$showToast.call(this, message, type);
			},
			//获取门店列表
			async getStoreList(type) {
				let obj = {
					pageSize: -1,
					pageNo: 1
				};
				let res = await getStoreList(obj);
				if (type != 'push') {
					this.allStoreList = res.data.result.records;
					this.allStoreList.unshift({
						storeName: '全部门店',
						id: null
					})
				} else {
					this.allStoreList = [...this.allStoreList, ...res.data.result.records];
				}
			},
			//获取商品列表
			// async getGoodList(type) {
			// 	let res = await getGoodList({pageNo:this.pageNo,pageSize:this.pageSize});
			// 	if (type != 'push') {
			// 		this.goodList = res.data.result.records;
			// 	} else {
			// 		this.goodList = [...this.goodList, ...res.data.result.records]
			// 	}
			// },
			clearData(){
				this.getGoodList();
				this.allCheck=false;
			},
			//获取商品列表
			async getGoodList(type) {
				console.log('66688888')
				let res = await getGoodList({
					pageSize: this.pageSize * this.pageNo,
					pageNo: 1,
					tradeName: this.tradeName,
					upFlag: this.upFlag,
					limitBuy: this.limitBuy,
					merchantId: this.merchantId
				});
				res.data.result.records.forEach(item => {
					item.checked = false;
				})
				this.goodList = [];
				this.goodList = res.data.result.records;
			},
			showSelect() {
				this.selectVisiable = true;
			},
			selectThis(item) {
				this.checkStoreInfo = item;
				this.merchantId = item.id;
				this.getGoodList()
				this.selectVisiable = false;
			},
			changeMenuIndex(index) {
				this.checkMenuIndex = index;
				switch (index) {
					case 0:
						this.upFlag = '';
						this.limitBuy = null;
						break;
					case 1:
						this.upFlag = 'YES';
						this.limitBuy = null;
						break;
					case 2:
						this.upFlag = 'NO';
						this.limitBuy = null;
						break;
					case 3:
						this.upFlag = null;
						this.limitBuy = '1';
						break;
				}
				this.getGoodList()
			},
			addGood() {
				this.showAddGood = true;
				this.showType = 'add';
			},
			hideBox(type) {
				this.showAddGood = false;
				this.getGoodList();
			},
			//展示编辑商品弹窗并预设值
			showEdit(value) {
				this.showAddGood = true;
				this.showType = 'edit';
				this.editInfo = value;
			},
			copyInfo(value) {
				this.showAddGood = true;
				this.showType = 'copy';
				this.editInfo = value;
			},
			//展示modal弹窗
			showModal(type, index) {
				this.modalType = type;
				if (type == 'delete') {
					this.deleteIndex = index;
					this.content = '是否要删除这个商品'
				} else if (type == 'up') {
					if (this.goodList[index].upFlag == '上架中') {
						return;
					}
					this.upIndex = index;
					this.content = '是否要上架这个商品'
				} else if (type == 'down') {
					if (this.goodList[index].upFlag == '下架中') {
						return;
					}
					this.downIndex = index;
					this.content = '是否要下架这个商品'
				} else if (type == 'batchUp' || type == 'batchDown') {
					if (this.selectRow.length == 0) {
						this.$showToast.call(this, '请至少选择一个商品', 'warning');
						return;
					}
					let flag = false;
					this.selectRow.find(item => item.upFlag == (type == 'batchUp' ? '上架中' : '下架中') && (flag = true))
					if (flag) {
						this.$showToast.call(this, `您选择的数据中有一条已经${type=='batchUp'?'上架':'下架'},请核对之后再进行处理`, 'warning');
						return;
					}
					this.content = `是否将您选中的${this.ids.length}条数据全部${this.modalType=='batchUp'?'上架':'下架'}`
				}
				this.modalShow = true;
			},
			async changeGoodState(type, state) {
				let obj = JSON.parse(JSON.stringify(this.goodList[type == 'up' ? this.upIndex : this.downIndex]));
				obj.upFlag = type == 'up' ? '上架中' : '下架中';

				let res = await editGoodUpFlag(obj);
				if (res.data.success) {
					this.getGoodList()
					this.getFoodStateTotal()
					this.showToast(type == 'up' ? '上架成功' : '下架成功', 'success');
				} else {
					this.showToast(res.data.message, 'warning');
				}
			},
			//删除商品
			async deteleGood() {
				let res = await deteleGood({
					id: this.goodList[this.deleteIndex].id
				});
				if (res.data.success) {
					this.getGoodList();
					this.getFoodStateTotal()
					this.showToast('删除商品成功', 'success');
				} else {
					this.showToast(res.data.message, 'warning');
				}
			},
			async batchChangeState(type) {
				let res = await batchChangeState({
					selections: this.ids.join(","),
					upFlag: type
				});
				if (res.data.success) {
					this.$showToast.call(this, `批量${this.modalType=='batchUp'?'上架':'下架'}成功`, 'success');
					this.getGoodList()
				} else {
					this.$showToast.call(this, res.data.message, 'success');
				}
			},
			//共用确认函数
			async confirm() {
				this.modalShow = false;
				if (this.modalType == 'up') {
					this.changeGoodState('up', '上架中')
				} else if (this.modalType == 'down') {
					this.changeGoodState('down', '下架中')
				} else if (this.modalType == 'delete') {
					this.deteleGood();
				} else if (this.modalType == 'batchUp') {
					this.batchChangeState('上架中');
				} else if (this.modalType == 'batchDown') {
					this.batchChangeState('下架中');
				}
			},
			//下拉触底加载更多当前地址的菜品列表
			getMoreGood() {
				let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //滚动高度
				let clientHeight = document.documentElement.clientHeight; //可视高度
				let scrollHeight = document.documentElement.scrollHeight; //内容高度
				console.log('num', scrollHeight - scrollTop - 80 <= clientHeight)
				if (scrollHeight - scrollTop - 80 <= clientHeight) {
					console.log('this.moreGoodFlag', this.moreGoodFlag)
					if (!this.moreGoodFlag) {
						this.moreGoodFlag = true
						console.log('this.moreGoodFlag2', this.moreGoodFlag)
						console.log('this.goodList.length', this.goodList.length)
						if (this.goodList.length != 0 && this.goodList.length % this.pageSize == 0) {
							this.pageNo = this.pageNo + 1;
							this.getGoodList('push');
							setTimeout(() => {
								this.moreGoodFlag = false;
							}, 1000)
						}
					}
				}
			},
			//全选
			changeAllCheck() {
				this.allCheck = !this.allCheck;
				this.ids = [];
				this.selectRow = [];
				this.goodList.forEach(item => {
					item.checked = this.allCheck;
					this.ids.push(item.id);
					this.selectRow.push(item);
				})
			},
			//单选
			changeRadioState(index) {
				console.log(6666);
				let obj = JSON.parse(JSON.stringify(this.goodList[index]));
				obj.checked = !obj.checked;
				this.$set(this.goodList, index, obj)

				this.ids = [];
				this.selectRow = [];
				this.goodList.forEach(item => {
					if (item.checked) {
						this.ids.push(item.id)
						this.selectRow.push(item)
					}
				});
				if (this.ids.length == this.goodList.length) {
					this.allCheck = true
				}
			},
			//展示批量处理库存弹窗
			showBatchModifyInventory() {
				if (this.ids.length == 0) {
					this.$showToast.call(this, '请至少选择一个商品', 'warning');
					return;
				}
				this.hiddenFlag = true;
				this.batchVisiable = true;
				this.$forceUpdate()
			},
			//更改商品状态
			changeFoodState(type) {

			},
			hiddenBox() {
				this.hiddenFlag = false;
				this.batchVisiable = false;
				this.allCheck=false;
				this.$forceUpdate()
			}
		},
		onReachBottom() {
			if (!this.moreGoodFlag) {
				if (this.goodList.length != 0 && this.goodList.length % this.pageSize == 0) {
					this.pageNo = this.pageNo + 1;
					this.moreGoodFlag = true
					this.getGoodList();
					setTimeout(() => {
						this.moreGoodFlag = false;
					}, 1000)
				}
			}
		}
		// onHide() {
		// 	window.removeEventListener("scroll", this.getMoreGood, true);
		// }
	}
</script>

<style lang="scss" scoped>
	.hidden {
		overflow: hidden;
	}

	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 200rpx;
		min-height: 100vh;
	}

	.hiddenBox {
		max-height: 100vh;
		overflow: hidden;
	}

	.top {
		padding: 0 20rpx;
		@include flex(space-between, center);
		background-color: #fff;
		height: 88rpx;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);

		>view {
			@include flex();

			&:nth-child(1) {
				font-size: 28rpx;
				line-height: 40rpx;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}

				margin-right: 40rpx;
			}

			&:nth-child(2) {
				flex: 1;
				margin-left: 20rpx;
				@include flex();

				image {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					left: 10rpx;
					top: 5rpx;
				}

				border-radius: 50rpx;
				border: 1px solid #f5f5f5;
				position: relative;
				overflow: hidden;

				/deep/.u-input__input {
					font-size: 28rpx;
					line-height: 60rpx;
					height: 60rpx;
					min-height: auto !important;
					text-indent: 60rpx;
					background-color: #f5f5f5;
				}
			}
		}
	}

	.commenMenu {
		@include flex();
		padding: 20rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 80rpx;
		width: 100%;
		z-index: 2;
		height: 140rpx;

		>view {
			width: 25%;
			flex-direction: column;
			@include flex(center, center);

			>view {
				font-size: 32rpx;

				&:nth-child(2) {
					font-size: 24rpx;
					line-height: 2;
				}
			}
		}

		.check {
			color: #FA690A;
			font-weight: bold;
		}
	}

	.controlBox {
		position: fixed;
		left: 0;
		top: 218rpx;
		width: 100%;
		background-color: #fff;
		z-index: 2;
		@include flex(space-around, center);
		padding:0 0 30rpx 0;

		>view {
			// width: 35%;
			padding: 0 30rpx;
			font-size: 28rpx;
			line-height: 2;
			background-color: #FA690A;
			color: #fff;
			border-radius: 50rpx;
			text-align: center;
		}
	}

	.storeBig {
		padding-top: 320rpx;

		/deep/.uni-checkbox-input {
			border-radius: 50%;
			width: 36rpx;
			height: 36rpx;
			border-color: #FA690A !important;
		}

		/deep/.uni-checkbox-input-checked {
			border-color: #FA690A !important;

			&:before {
				content: '';
				width: 30rpx;
				height: 30rpx;
				background-color: #FA690A;
				border-radius: 50%;
				display: block;
			}
		}

		.allCheckBox {
			background-color: #fff;
			padding: 20rpx 20rpx;
		}

		.storeList {
			background-color: #fff;
			padding: 30rpx 20rpx 0 20rpx;
			margin-bottom: 20rpx;

			.name {
				@include flex();
				font-size: 28rpx;
				line-height: 2;
				font-weight: bold;

				image {
					width: 32rpx;
					height: 32rpx;
					border-radius: 16rpx;
					margin-right: 20rpx;
				}
			}

			.info {
				margin: 20rpx 0;
				@include flex();
				padding-bottom: 38rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 40rpx;
					margin-left: 16rpx;
					border-radius: 16rpx;
					flex-shrink: 0;
				}

				>view:nth-child(3) {
					height: 160rpx;
					@include flex(space-between, flex-start);
					flex-direction: column;
					width: calc(100% - 440rpx);
					margin-right: 20rpx;
					line-height: 1;

					>view:nth-child(1) {
						font-size: 28rpx;
						font-weight: bold;
						width: 100%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						word-break: break-all;
					}

					>view:nth-child(2) {
						font-size: 26rpx;
						@include flex();
						color: rgba(0, 0, 0, .55);

						>view:nth-child(1) {
							margin-right: 10rpx;
						}
					}

					>view:nth-child(3) {
						font-size: 28rpx;
						color: rgba(0, 0, 0, .55);
						// color: red;
						// font-weight: bold;
					}
				}

				view:nth-child(4) {
					width: 160rpx;

					>view {
						border: 1px solid #eee;
						font-size: 28rpx;
						line-height: 2;
						border-radius: 50rpx;
						text-align: center;
						margin: 20rpx 0;
					}

					>.check {
						color: #FA690A;
						border: 1px solid #FA690A;
					}
				}
			}

			.control {
				@include flex();
				border-top: 1px solid #eee;
				padding: 32rpx 0;
				font-size:32rpx;

				>view {
					width: calc(100% / 3);
					@include flex(center, center);
					color: rgba(0, 0, 0, .55);

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.addStore {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		right: 0;
		bottom: 10vh;
	}

	.selectContent {
		.title {
			font-size: 32rpx;
			line-height: 2;
			font-weight: bold;
			text-align: center;
			margin-bottom: 14rpx;
		}

		.selList {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 24rpx 0;

			&:last-child {
				border: 0;
			}

			&:nth-child(2) {
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>
<style lang="scss">
	.storeBox {
		/deep/.u-mode-center-box {
			width: 95% !important;
			border-radius: 20rpx;

			.uni-scroll-view-content {
				height: auto !important;
			}
		}
	}

	.selectBox {
		/deep/.u-drawer-bottom {
			width: 100% !important;
			padding: 36rpx 20rpx 40rpx 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			min-height: 30vh;
			max-height: 80vh;
			overflow: auto;
		}
		/deep/ {
			.u-drawer__scroll-view {
				max-height: 80vh;
			}
		}
	}

	//添加商品组件的部分样式
	.addGoodBox {
		/deep/.u-drawer-right {
			width: 85% !important;
		}
	}
</style>
